{% extends "base.html" %}
{% block content %}

<div class="container">
    <!-- 头部状态栏 -->
    <div class="status-bar bg-dark text-white p-3 rounded-top">
        <div class="d-flex justify-content-between align-items-center">
            <div class="user-info">
                <h4 class="mb-0">
                    <i class="bi bi-person-circle"></i>
                    欢迎，{{ request.user.username }}
                    <span class="badge bg-success ms-2">积分：{{ user_score }}</span>
                    <span class="badge bg-info ms-2">当日流水：{{ daily_flow }}</span>

                    <!-- 修正的邀请按钮 -->
                    <a href="{% url 'generate-invite-link' %}" class="btn btn-success btn-sm ms-2">
                        <i class="bi bi-link-45deg"></i>
                        邀请链接
                    </a>

                    <!-- 下家流水按钮 -->
                    <a href="{% url 'invitee-bets' %}" class="btn btn-primary btn-sm ms-2">
                        <i class="bi bi-people-fill"></i>
                        下家流水：{{ invitee_daily_flow }}
                    </a>
                </h4>
            </div>
            <div class="issue-info">
                <h4 class="mb-0">
                    <i class="bi bi-calendar-event"></i>
                    当前期号：{{ current_issue|default:"等待开奖" }}
                    <span id="countdown" class="badge bg-warning ms-2"></span>
                </h4>
            </div>
        </div>
    </div>

    <!-- 下注控制台 -->
    <div class="bet-panel card border-0 shadow-lg my-4">
        <div class="card-header bg-primary text-white py-3">
            <h4 class="mb-0">
                <i class="bi bi-dice-5"></i>
                下注控制台  （倒计时30秒后停止下注）
            </h4>
        </div>
        <div class="card-body">
            <!-- 快捷卡片区域 -->
            <div class="bet-cards row g-3">
                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="small_odd"
                         style="border-left: 3px solid #ffc107;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-warning mb-0">小单</h5>
                                <small>0-13且单 | 4.6倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-warning"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="small_even"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">小双</h5>
                                <small>0-13且双 | 4.2倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="big_odd"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">大单</h5>
                                <small>14-27且单 | 4.2倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="big_even"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">大双</h5>
                                <small>14-27且双 | 4.6倍 14回本</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="small"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">小</h5>
                                <small>0-12 | 2倍 13 1.6倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="big"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">大</h5>
                                <small>14-27 | 2倍 14 1.6倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="odd"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">单</h5>
                                <small>0-27且单 | 2倍 13 1.6倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-sm-3">
                    <div class="bet-card cursor-pointer hover-shadow"
                         data-bet-type="even"
                         style="border-left: 3px solid #0dcaf0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="text-info mb-0">双</h5>
                                <small>0-27且双 | 2倍 14 1.6倍</small>
                            </div>
                            <i class="bi bi-check-circle-fill text-info"></i>
                        </div>
                    </div>
                </div>
            </div>

            <form method="post" class="row g-3 align-items-center">
                {% csrf_token %}

                <!-- 修改后的下拉菜单 -->
                <div class="col-lg-4">
                    <select class="form-select form-select-lg"
                            name="bet_type"
                            id="betTypeSelect"
                            required>
                        <option value="">可以单数字压注</option>
                        <option value="small_odd" class="text-warning">小单（0-13且单）4.6倍 13 回本</option>
                        <option value="small_even" class="text-info">小双（0-13且双）4.2倍</option>
                        <option value="big_odd" class="text-danger">大单（14-27且单）4.2倍</option>
                        <option value="big_even" class="text-success">大双（14-27且双）4.6倍 14 回本</option>
                        <option value="small" class="text-success">小（0-12）2倍 13 1.6倍</option>
                        <option value="big" class="text-danger">大（15-27）2倍 14 1.6倍</option>
                        <option value="odd" class="text-primary">单（全区间）2倍 13 1.6倍</option>
                        <option value="even" class="text-info">双（含0）2倍 14 1.6倍</option>
                        <option value="0" class="text-muted">0 (488倍)</option>
                        <option value="1" class="text-muted">1 (128倍)</option>
                        <option value="2" class="text-muted">2 (88倍)</option>
                        <option value="3" class="text-muted">3 (58倍)</option>
                        <option value="4" class="text-muted">4 (48倍)</option>
                        <option value="5" class="text-muted">5 (38倍)</option>
                        <option value="6" class="text-muted">6 (28倍)</option>
                        <option value="7" class="text-muted">7 (18倍)</option>
                        <option value="8" class="text-muted">8 (15倍)</option>
                        <option value="9" class="text-muted">9 (15倍)</option>
                        <option value="10" class="text-muted">10 (14倍)</option>
                        <option value="11" class="text-muted">11 (13倍)</option>
                        <option value="12" class="text-muted">12 (12倍)</option>
                        <option value="13" class="text-muted">13 (13倍)</option>
                        <option value="14" class="text-muted">14 (14倍)</option>
                        <option value="15" class="text-muted">15 (15倍)</option>
                        <option value="16" class="text-muted">16 (15倍)</option>
                        <option value="17" class="text-muted">17 (18倍)</option>
                        <option value="18" class="text-muted">18 (18倍)</option>
                        <option value="19" class="text-muted">19 (18倍)</option>
                        <option value="20" class="text-muted">20 (18倍)</option>
                        <option value="21" class="text-muted">21 (28倍)</option>
                        <option value="22" class="text-muted">22 (38倍)</option>
                        <option value="23" class="text-muted">23 (48倍)</option>
                        <option value="24" class="text-muted">24 (58倍)</option>
                        <option value="25" class="text-muted">25 (88倍)</option>
                        <option value="26" class="text-muted">26 (128倍)</option>
                        <option value="27" class="text-muted">27 (488倍)</option>
                    </select>
                </div>

                <div class="col-lg-5">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-currency-exchange text-success"></i>
                        </span>
                        <input type="number"
                               class="form-control form-control-lg border-start-0"
                               name="amount"
                               placeholder="输入金额（≥10）"
                               min="10"
                               max="{{ user_score }}"
                               required>
                    </div>
                </div>

                <div class="col-lg-3">
                    <button type="submit"
                            class="btn btn-lg btn-success w-100"
                            id="submitBtn"
                            {% if not allow_betting %}disabled{% endif %}>
                        <i class="bi bi-check-circle me-2"></i>
                        {% if allow_betting %}确认下注{% else %}停止下注{% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 数据看板 -->
    <div class="row g-4">
        <!-- 开奖数据 -->
        <div class="col-lg-7">
            <div class="card shadow-sm h-100" style="margin-right: 15px;">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-table me-2"></i>
                        最近20期开奖数据
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" style="table-layout: fixed;">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 15%">期号</th>
                                    <th style="width: 30%">开奖号码</th>
                                    <th style="width: 15%">总和</th>
                                    <th style="width: 15%">状态</th>
                                    <th style="width: 25%">开奖时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entry in entries %}
                                <tr class="align-middle">
                                    <td class="fw-bold">{{ entry.issue_number }}</td>
                                    <td class="text-primary">{{ entry.numbers }}</td>
                                    <td>
                                        <span class="badge bg-success rounded-pill">
                                            {{ entry.sum_value }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if entry.status == 'closed' %}
                                        <span class="badge bg-success">已结算</span>
                                        {% else %}
                                        <span class="badge bg-warning">进行中</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ entry.start_time|date:"m-d H:i" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 更新后的下注记录面板 -->
        <div class="col-lg-5">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">
                        <i class="bi bi-list-check me-2"></i>
                        最新下注记录（实时更新）
                    </h5>
                </div>
                <div class="card-body p-0" style="max-height:500px; overflow-y:auto;">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>期号</th>
                                <th>类型</th>
                                <th>金额</th>
                                <th>当前积分</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in bet_records %}
                            <tr>
                                <td class="fw-bold">第{{ record.issue }}期</td>
                                <td>
                                    <span class="badge
                                        {% if 'small' in record.bet_type %}bg-success
                                        {% elif 'big' in record.bet_type %}bg-danger
                                        {% else %}bg-primary{% endif %}">
                                        {% if record.bet_type == "small_odd" %}小单
                                        {% elif record.bet_type == "small_even" %}小双
                                        {% elif record.bet_type == "big_odd" %}大单
                                        {% elif record.bet_type == "big_even" %}大双
                                        {% else %}{{ record.get_bet_type_display }}
                                        {% endif %}
                                    </span>
                                </td>
                                <td class="fw-bold text-success">￥{{ record.amount }}</td>
                                <td class="fw-bold text-primary">{{ record.current_score }}</td>
                                <td>
                                    {% if record.issue == current_issue_number and remaining_time > 30 and not record.is_cancelled %}
                                    <form method="post" action="{% url 'cancel-bet' %}" class="d-inline">
                                        {% csrf_token %}
                                        <input type="hidden" name="bet_id" value="{{ record.id }}">
                                        <button type="submit" class="btn btn-sm btn-danger">
                                            <i class="bi bi-x-circle"></i> 取消
                                        </button>
                                    </form>
                                    {% else %}
                                        {% if record.status == 'settled' %}
                                            {% if record.result == 'win' %}
                                                <span class="text-danger fw-bold">赢</span>
                                            {% else %}
                                                <span class="text-success fw-bold">输</span>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted small">
                                                {% if record.is_cancelled %}已取消
                                                {% elif remaining_time <= 30 %}不可取消
                                                {% else %}--{% endif %}
                                            </span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">
                                    <i class="bi bi-inbox display-6"></i>
                                    <p class="mt-2">暂无下注记录</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 倒计时脚本 -->
<script>
let countdown = Math.max({{ remaining_time|default:0 }}, 0);
let refreshInterval = null;

const updateDisplay = () => {
    const countdownElement = document.getElementById('countdown');
    const submitButton = document.getElementById('submitBtn');
    const buttonIcon = submitButton.querySelector('i');

    if(countdown > 0) {
        if(countdown <= 30) {
            submitButton.innerHTML = `<i class="bi bi-slash-circle me-2"></i>停止下注`;
            submitButton.disabled = true;
            submitButton.classList.replace('btn-success', 'btn-secondary');
        } else {
            submitButton.innerHTML = `<i class="bi bi-check-circle me-2"></i>确认下注`;
            submitButton.disabled = false;
            submitButton.classList.replace('btn-secondary', 'btn-success');
        }

        const minutes = Math.floor(countdown / 60);
        const seconds = countdown % 60;
        countdownElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        countdown--;
        setTimeout(updateDisplay, 1000);
    } else {
        countdownElement.textContent = "已截止";
        submitButton.innerHTML = `<i class="bi bi-slash-circle me-2"></i>停止下注`;
        submitButton.disabled = true;
        submitButton.classList.replace('btn-success', 'btn-secondary');
        clearInterval(refreshInterval);
        setTimeout(() => window.location.reload(), 3000);
    }
}

window.addEventListener('load', () => {
    updateDisplay();
    if(countdown > 0) {
        refreshInterval = setInterval(() => {
            window.location.reload();
        }, 15000);
    }
});

window.addEventListener('beforeunload', () => {
    clearInterval(refreshInterval);
});

// 新增卡片点击事件处理
document.querySelectorAll('.bet-card').forEach(card => {
    card.addEventListener('click', function() {
        // 设置下拉菜单选中值
        const select = document.getElementById('betTypeSelect');
        select.value = this.dataset.betType;

        // 触发change事件保持表单同步
        select.dispatchEvent(new Event('change'));

        // 更新卡片选中状态
        document.querySelectorAll('.bet-card').forEach(c =>
            c.classList.remove('selected'));

        this.classList.add('selected');
    });
});

// 错误消息弹窗处理
{% for message in messages %}
    {% if message.tags == 'error' %}
        const msg = '{{ message|escapejs }}'.replace('下注失败：', '');
        alert(msg);
    {% endif %}
{% endfor %}
</script>

<style>

/* 新增卡片样式 */
.bet-card {
    height: 120px; /* 固定高度 */
    padding: 1.5rem;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    border: 2px dashed #4a5568;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 响应式调整 */
@media (min-width: 768px) {
    .bet-card {
        height: 100px;
    }
}

.bet-card:hover {
    transform: translateY(-3px);
    border-color: #1abc9c;
    box-shadow: 0 10px 15px rgba(26, 188, 156, 0.2);
}



.bet-card {
    padding: 1.5rem;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    border: 2px dashed #4a5568;
    margin: 10px;
}

.bet-card:hover {
    transform: translateY(-3px);
    border-color: #1abc9c;
    box-shadow: 0 10px 15px rgba(26, 188, 156, 0.2);
}

.bet-card.selected {
    border-color: #3498db;
    background: linear-gradient(145deg, #3498db, #2980b9);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}

.bet-card h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #ecf0f1;
}

.bet-card small {
    display: block;
    color: #7f8c8d;
    font-size: 0.85rem;
    line-height: 1.4;
}

.bet-card.selected h5 {
    color: #ffffff !important;
}

.bet-card.selected small {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 保留原有样式 */
.btn-danger {
    background: linear-gradient(45deg, #dc3545, #c82333);
    border: none;
    padding: 3px 10px;
    font-size: 0.875rem;
}

.btn-danger:hover {
    background: linear-gradient(45deg, #c82333, #bd2130);
}

.status-bar {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bet-panel .card-header {
    background: linear-gradient(45deg, #1e3c72, #2a5298);
}

.table-hover tbody tr {
    transition: all 0.3s ease;
}

.table-hover tbody tr:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.list-group-item {
    transition: all 0.2s ease;
}

.list-group-item:hover {
    transform: translateX(3px);
}

.text-warning { color: #ffc107 !important; }
.text-info { color: #0dcaf0 !important; }

.card-body::-webkit-scrollbar {
    width: 8px;
}
.card-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.card-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.card-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.table-hover tbody tr:hover td {
    background-color: #f8f9fa;
}

.table td, .table th {
    vertical-align: middle;
    padding: 12px;
}

/* 下家流水按钮样式 */
.btn-primary {
    background: linear-gradient(45deg, #3498db, #2980b9);
    border: none;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(52, 152, 219, 0.4);
}

.bi-people-fill {
    margin-right: 0.5rem;
}
</style>
{% endblock %}
